<!-- <section class="content container-fluid"> -->
<div class="card-header">
        <div class="row">
                <div class="col-md-2">
                    <div class="input-group input-group-sm mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text"><i class="mi mi-Permissions"></i></div>
                        </div>
                        <input type="text" class="form-control" ng-model="role.name" ng-enter="createRole()" placeholder="Enter new role name...">
                        <div class="input-group-append">
                            <a class="btn btn-outline-secondary" ng-click="createRole()">Create</a>
                        </div>
                    </div>
                    <!-- 
                    <input type="text" ng-model="role.name" class="form-input" ng-enter="createRole()" />
                    <a class="btn btn-success" ng-click="createRole()">Create</a> -->
                </div>
                <div class="col-md-10">
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                </div>
            </div>
</div>
<div class="card-body">
        <table class="table table-sm table-hover" cellspacing="0">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">
                            Rolename
                        </th>
                        <th scope="col">
                            Normalized Name
                        </th>
                        <th scope="col">
                            Id
                        </th>
                        <th scope="col">
                            Concurrency Stamp
                        </th>
            
                        <th scope="col" style="width: 5%;">Actions</th>
                    </tr>
                </thead>
                <tbody class="sortable" ng-init="getList()">
                    <tr ng-repeat="item in data track by $index" class="sortable-item" sort-model="role" sort-model-id="{{item.id}}">
            
                        <td>
                            <span ng-bind="item.name"></span>
                        </td>
                        <td>
                            <span ng-bind="item.normalizedName"></span>
                        </td>
                        <td>
                            <small><span ng-bind="item.id"></span></small>
                        </td>
                        <td>
                            <small><span ng-bind="item.concurrencyStamp"></span></small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                                <a href="/portal/role/details/{{item.id}}" class="btn btn-light">
                                    <span class="fa fa-pen text-primary"></span>
                                </a>
                                <a ng-click="remove(item.name);" class="btn btn-light">
                                    <span class="fas fa-times text-danger"></span>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
</div>
<div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end"
        a-class="page-link" paging-action="getList(page-1)" scroll-top="true">
</div>


<!-- </section> -->
